
<template>
  <div class="app-container">
    <section class="list">
      <div class="item" v-for="(item,index) in imgList" :key="index">
        <img style="width:100%" :src="item.url">
        <div class="shadow">
          <div class="but">
            <el-button type="primary" @click="design(item.name)">开始设计</el-button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { posterList } from '@/api/marketing'
export default {
  name: 'TemplateCenter',
  data() {
    return {
      imgList: [
        {
          name: 'templateEdit',
          url: 'http://ossdev0.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200422200415.png'
        },
        {
          name: 'templateEdit2',
          url: 'http://ossdev0.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200427180000.png'
        },
        {
          name: 'templateEdit3',
          url: 'http://ossdev0.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200422200359.png'
        }
      ]
    }
  },
  computed: {},
  created() {
    // posterList({
    //   businessId: this.$store.getters.businessId
    // }).then(res => {
    //   console.log(res, 'sssssss')
    // })
  },
  methods: {
    design(name) {
      this.$router.push(`/marketing/template/${name}`)
    }
  }
}
</script>

<style lang='scss' scoped>
  .list{
    display: flex;
    .item{
      position: relative;
      margin-right: .2rem;
      width: 3rem;
      height: auto;
      overflow: hidden;
      .shadow{
        position: absolute;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: .18rem;
        font-weight: 600;
        color: #fff;
        background: rgba(0, 0, 0, 0);
        transition: all .3s ease-in-out;
      }
      .but{
        opacity: 0;
        transition: all .3s ease-in-out;
      }
      &:hover .shadow{
       background: rgba(0, 0, 0, .7);
      }
      &:hover .but{
       opacity: 1;
      }
    }
  }
</style>
